<template>
	<div class="container">
		<div class="el-card-body-top-zero" style="display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); gap: 20px">
			<YdCard :title="'新建会话量&建连耗时'">
				<div style="width: 100%; height: 100%">
					<YdEcharts :ref-val="'bar-and-broken'" :options="state.barAndBrokenOptions" @echartsClick="echartsClick" />
				</div>
			</YdCard>
			<YdCard :title="'零窗口包'">
				<div style="width: 100%; height: 100%">
					<YdEcharts :ref-val="'zero-window-bar'" :options="state.zeroWindowOptions" @echartsClick="echartsClick" />
				</div>
			</YdCard>
			<YdCard :title="'重传包'">
				<div style="width: 100%; height: 100%">
					<YdEcharts :ref-val="'retransmission-bar'" :options="state.retransmissionOptions" @echartsClick="echartsClick" />
				</div>
			</YdCard>
			<YdCard :title="'重置包'">
				<div style="width: 100%; height: 100%">
					<YdEcharts :ref-val="'reset-bar'" :options="state.resetOptions" @echartsClick="echartsClick" />
				</div>
			</YdCard>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ECOption } from '../../../../echarts';
import { reactive } from 'vue';
import 'echarts/lib/component/legend';
import YdEcharts from '@/components/YdEcharts/index.vue';
import { dataZoom, SYMBOLSIZE, GRID, formatterToolTipFn, NAMETEXTSTYLE, LEGEND } from '../echartsConfig';
import { commonFormatter, toDecimalFormate2 } from '@/utils/common';
import { watch } from 'fs';
import { colorSortGroup, xAxisOrYaxis } from '@/utils/echartsConfig';

const emit = defineEmits<{
	(event: 'echartsClick', e: any): void;
}>();
interface Props {
	tcpScale: string[];
	newSessionData: number[];
	connTimeData: number[];
	clientZeroWindowData: number[];
	serverZeroWindowData: number[];
	clientRetransmissionData: number[];
	serverRetransmissionData: number[];
	clientResetData: number[];
	serverResetData: number[];
}
const props = withDefaults(defineProps<Props>(), {
	tcpScale: () => [],
	newSessionData: () => [],
	connTimeData: () => [],
	clientZeroWindowData: () => [],
	serverZeroWindowData: () => [],
	clientRetransmissionData: () => [],
	serverRetransmissionData: () => [],
	clientResetData: () => [],
	serverResetData: () => [],
});
const echartsData = reactive<any>({
	title: {
		text: '',
		left: 'center',
		top: 'top',
		textStyle: {
			//文字颜色
			color: '#FFFFFF',
			//字体风格,'normal','italic','oblique'
			fontStyle: 'normal',
			//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
			fontWeight: 500,
			//字体系列
			fontFamily: 'sans-serif',
			//字体大小
			fontSize: 16,
		},
	},
	grid: {
		left: '0%',
		right: '0%',
		top: '5%',
		bottom: '12%',
		containLabel: true,
	},
	barSeriesColor: {
		type: 'liner',
		x: 0,
		y: 1,
		x2: 0,
		y2: 0,
		colorStops: [
			{
				offset: 0,
				color: '#06F4F4',
			},
			{
				offset: 1,
				color: '#1dc69d',
			},
		],
		global: false, // 缺省为 false
	},
	data: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
	colorGroup: ['#4DBC84', '#FE9A0C', '#FE5578', '#06F4F4', '#355f98', '#3f714e'],
});
const state = reactive<any>({
	extendData: {
		pageSize: 10,
		pageNum: 1,
	},
	// 新建会话柱状图、建连耗时折线图
	barAndBrokenOptions: {
		color: echartsData.colorGroup,
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
			},
			formatter: function (params: any) {
				// 自定义 tooltip 数据
				return formatterToolTipFn(params, '个', true);
			},
		},
		grid: GRID,
		legend: LEGEND,
		xAxis: [
			{
				...xAxisOrYaxis.xAxis,
				// prettier-ignore
				data: props.tcpScale,
			},
		],
		yAxis: [
			{
				...xAxisOrYaxis.yAxis,
				position: 'left',
				// 坐标 轴线
				axisLine: {
					show: false,
					// 展示y轴刻度

					lineStyle: {
						type: 'solid',
						color: colorSortGroup[0],
					},
				},
				axisTick: {
					alignWithLabel: false,
					show: false,
					inside: false,
				},
				axisLabel: {
					color: '#fff',
					formatter: function (value: any) {
						return commonFormatter(value, '个');
					},
				},
			},
			{
				position: 'left',
				axisTick: {
					alignWithLabel: false,
					show: false,
					inside: false,
				},
				// 坐标 轴线
				axisLine: {
					show: false,
				},
			},
			{
				...xAxisOrYaxis.yAxis,
				nameTextStyle: NAMETEXTSTYLE,
				position: 'right',
				// 展示y轴刻度
				axisTick: {
					alignWithLabel: false,
					show: false,
					inside: false,
				},
				// 坐标 轴线
				axisLine: {
					show: false,
					lineStyle: {
						color: colorSortGroup[1],
					},
				},
				axisLabel: {
					color: '#fff',
					formatter: function (value: any) {
						return toDecimalFormate2(value, 'wm');
					},
				},
			},
		],
		series: [
			{
				name: '新建会话量',
				type: 'bar',
				// 移入展示其他相关图表示例
				// emphasis: {
				// 	focus: 'series',
				// },
				data: props.newSessionData,
				itemStyle: {
					normal: {
						color: colorSortGroup[0],
					},
				},
			},
			{
				name: '建连耗时',
				type: 'line',
				// 移入展示其他相关图表示例
				// emphasis: {
				// 	focus: 'series',
				// },
				yAxisIndex: 2,
				symbolSize: SYMBOLSIZE, //拐点大小
				data: props.connTimeData,
				itemStyle: {
					normal: {
						color: colorSortGroup[1],
					},
				},
			},
		],
	} as ECOption,
	// 零窗口包柱状图
	zeroWindowOptions: {
		title: { ...echartsData.title },
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
			formatter: function (params: any) {
				// 自定义 tooltip 数据
				return formatterToolTipFn(params, '个');
			},
		},
		grid: GRID,
		legend: LEGEND,
		xAxis: [
			{
				...xAxisOrYaxis.xAxis,
				data: props.tcpScale,
			},
		],
		color: colorSortGroup,
		yAxis: {
			...xAxisOrYaxis.yAxis,
			// 文本颜色
			axisLabel: {
				show: true,
				textStyle: {
					color: '#ffffff',
				},
				formatter: function (params: any) {
					// 自定义 tooltip 数据
					return commonFormatter(params, '个');
				},
			},
		},
		series: [
			{
				name: '客户端零窗口包',
				type: 'bar',
				barWidth: '20%',
				data: props.clientZeroWindowData,
			},
			{
				name: '服务端零窗口包',
				type: 'bar',
				barWidth: '20%',
				data: props.serverZeroWindowData,
			},
		],
	} as ECOption,
	// 重传包柱状图
	retransmissionOptions: {
		title: { ...echartsData.title },
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
			formatter: function (params: any) {
				// 自定义 tooltip 数据
				return formatterToolTipFn(params, '个');
			},
		},
		grid: GRID,
		legend: LEGEND,
		color: colorSortGroup,
		xAxis: [{ ...xAxisOrYaxis.xAxis, data: props.tcpScale }],
		yAxis: {
			...xAxisOrYaxis.yAxis,
			// 文本颜色
			axisLabel: {
				show: true,
				textStyle: {
					color: '#ffffff',
				},
				formatter: function (params: any) {
					// 自定义 tooltip 数据
					return commonFormatter(params, '个');
				},
			},
		},
		series: [
			{
				name: '客户端重传包',
				type: 'bar',
				barWidth: '20%',
				data: props.clientRetransmissionData,
			},
			{
				name: '服务端重传包',
				type: 'bar',
				barWidth: '20%',
				data: props.serverRetransmissionData,
			},
		],
	} as ECOption,
	// 重置包柱状图
	resetOptions: {
		title: { ...echartsData.title },
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
			formatter: function (params: any) {
				// 自定义 tooltip 数据
				return formatterToolTipFn(params, '个');
			},
		},
		grid: GRID,
		legend: LEGEND,
		color: colorSortGroup,
		xAxis: [
			{
				...xAxisOrYaxis.xAxis,
				data: props.tcpScale,
			},
		],
		yAxis: {
			...xAxisOrYaxis.yAxis,
			// 文本颜色
			axisLabel: {
				show: true,
				textStyle: {
					color: '#ffffff',
				},
				formatter: function (params: any) {
					// 自定义 tooltip 数据
					return commonFormatter(params, '个');
				},
			},
		},
		series: [
			{
				name: '客户端重置包',
				type: 'bar',
				barWidth: '20%',
				data: props.clientResetData,
			},
			{
				name: '服务端重置包',
				type: 'bar',
				barWidth: '20%',
				data: props.serverResetData,
			},
		],
	} as ECOption,
});

function echartsClick(e: any) {
	emit('echartsClick', e);
}
</script>
<style lang="scss" scoped>
.container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 680px;
	gap: 20px;
}
</style>
